<template>
    <div :style="styleOption.contentOut">
        <div class="basic-table-content" :style="styleOption.content" :id="id">
            <a-table
                :columns="columns"
                :scroll.sync="scrollStyle"
                :customRow="customRow"
                :data-source="source"
                :row-selection="rowSelection"
                :row-class-name="rowClassFn"
                :rowKey="rowKey"
                :pagination="false"
                @change="handleTableChange"
            >
                <div
                    :key="i"
                    v-for="(item, i) in columns"
                    slot-scope="text, record, index"
                    :slot="item.scopedSlots ? item.scopedSlots.customRender : ''"
                >
                    <slot
                        :name="item.scopedSlots.customRender"
                        v-bind:text="text"
                        v-bind:record="record"
                        v-bind:index="index"
                    ></slot>
                </div>
            </a-table>
        </div>

        <div class="basic-table-pagination" :style="styleOption.pagination">
            <a-pagination
                showQuickJumper
                showSizeChanger
                v-model="currentPage"
                @change="onChange"
                @showSizeChange="sizeChange"
                size="small"
                :total="pageTotal"
                :pageSize="pageSize"
            />
        </div>
    </div>
</template>

<script>
/*  示例,
*    <basic-table :source.sync="tableData" :columns="columns" :page-total.sync="paginationObj.total" :customRow="customRow" @pageChange="pageChange" @handleTableChange="handleTableChange">

                    <template v-slot:room_name="{ text,record }">
                    * 如果需要拿到值做自定义的展示或者处理,利用插槽的props传值, 注意v-slot是template特有的写法, 后面的值就是columns中对象的指定渲染的
                    *  scopedSlots: {customRender: 'room_name'},
                        <div v-if="text">
                            <i class="iconfont icon-20_show_locale c-65B168 fs-20">&#xe78f;</i>
                            <span class="ml-5">{{ text }}</span>
                        </div>
                        <div v-else>--</div>
                    </template>

                    <template v-slot:action="{ text,record }">
                        <div class="flex-ac ">
                             <span class="mr-24 xdeas-link" @click.stop="clickModify(record)">
                                 <i class="iconfont icon-16_list_edit">&#xe78e;</i>
                                 <span>编辑</span>
                             </span>

                            <span class="mr-24 xdeas-link" @click.stop="dataMap(record)">
                                  <i class="iconfont icon-16_list_mirror">&#xe78d;</i>
                                  <span>数据映射</span>
                            </span>

                            <span class="xdeas-link" @click.stop="deleteDevice(record)">
                                  <i class="iconfont icon-16_list_del">&#xe78c;</i>
                                  <span>删除</span>
                            </span>
                        </div>
                    </template>
                </basic-table>
*
* */
export default {
    name: "basic-table",
    props: {
        styleOption: {
            type: Object,
            default() {
                return {
                    pagination: "",
                };
            },
        },
        columns: {
            // 每列展示数据的参数,可参考Ant 官网的table组件文档
            type: Array,
            default() {
                return [];
            },
        },
        customRow: {
            // 每一行的拓展函数,可参考Ant 官网的table组件文档
            type: Function,
            default() {
                return function () {
                };
            },
        },
        notCustomRow: {
            type: Boolean,
            default: true,
        },
        source: {
            // 展示的数据
            type: Array,
            default() {
                return [];
            },
        },
        pageTotal: {
            type: Number,
            default: 0,
        },
        currentPage: {
            type: Number,
            default: 1,
        },
        pageSize:{
            type: Number,
            default: 10,
        },
        rowSelection:{
            type:Object,
        },
        rowKey:{
            type:String,
            default:'id'
        }
    },

    watch:{
        source:{
            deep:true,
            handler(){
                this.calcFinish = false;
            },
        },
        columns: {
            //
            deep:true,
            handler(val){
                this.columns = val
            },
        },
    },

    mounted() {
        // 50 为表头的高度
        this.calcHeight();
    },
    data() {
        return {
            tableContentHeight: 0, // 想要固定表头的话,需要计算一个内容的高度
            id: new Date().getTime() + Math.round(Math.random() * 100),
            scrollStyle: {},
            isShow: true, // 当配置更新时,控制这个属性,达到重新渲染的目的
            calcFinish:false,
        };
    },
    updated() {
        if(!this.calcFinish){
            this.scrollStyle = {};
            this.$nextTick(()=>{
                let idDom = document.getElementById(this.id)
                if (idDom && idDom.querySelector) {
                    // 获取表头的高度,表格的高度减去表头的高度剩下的高度就是内容区域的
                    let headHeight = idDom.querySelector('.ant-table-thead').clientHeight
                    this.tableContentHeight = idDom.clientHeight - headHeight;
                    let tableBody = idDom.querySelector('.ant-table-tbody')
                    // 计算内容的高度是否超过可展示的高度,解决ant表格一直出现滚动条的问题 , + 1是解决不应该出现滚动条的情况下,也出现了滚动条
                    if (tableBody.clientHeight >= this.tableContentHeight + 1) {
                        this.scrollStyle = {y: this.tableContentHeight}
                    }

                    if (tableBody.clientWidth > idDom.clientWidth + 1 ) {
                        this.scrollStyle.x = '100%'
                    }
                }
                this.calcFinish = true;
            })
        }
    },
    methods: {
        calcHeight() {
            this.calcFinish = false;
            // this.scrollStyle = {};
            // this.$nextTick(() => {
            //     if (document.getElementById(this.id) && document.getElementById(this.id).querySelector) {
            //         setTimeout(() => {
            //             // /* 动态计算高度
            //             // * 1, 如果source有值,证明表格有数据需要渲染,
            //             // * 2, 获取界面的元素来进行判断是否渲染完成,
            //             // * 3, 渲染完成之后
            //             // * */
            //
            //
            //             this.tableContentHeight =
            //                 document.getElementById(this.id).clientHeight - 50;
            //             // 计算内容的高度是否超过可展示的高度,解决ant表格一直出现滚动条的问题
            //             if (document.getElementById(this.id).querySelector('.ant-table-tbody').clientHeight >= this.tableContentHeight) {
            //                 this.scrollStyle = {y: this.tableContentHeight}
            //             }
            //         }, 300)
            //     }
            // })

        },
        rowClassFn(record, index) {
            if (this.notCustomRow) {
                return index % 2 == 0 ? "pointer" : "bg-FAFAFA pointer";
            } else {
                return index % 2 == 0 ? "" : "bg-FAFAFA ";
            }
        },
        handleTableChange(pagination, filter, sort) {
            if (sort.order) {
                let sortObj = {
                    column: sort.columnKey,
                    sort: sort.order == "descend" ? "DESC" : "ASC",
                };
                this.$emit("handleTableChange", sortObj);
            } else {
                this.$emit("handleTableChange", sort);
            }
        },
        onChange(page) {
            this.$emit("pageChange", page);
            // this.calcHeight();
        },
        sizeChange(page, pageSize) {


            this.$emit("pageChange", page, pageSize);
            // this.calcHeight();
        },
    },
};
</script>

<style scoped></style>
